<template>
  <div class="dashboard-editor-container">
    <div class=" clearfix">
      <pan-thumb style="float: left" :image="avatar"> Your roles:
        <span class="pan-info-roles" :key='item' v-for="item in roles">{{item}}</span>
      </pan-thumb>
      <github-corner></github-corner>
      <div class="info-container">
        <span class="display_name">{{name}}</span>
        <!-- <span style="font-size:20px;padding-top:20px;display:inline-block;">editor : dashboard</span> -->
      </div>
    </div>
    <div>
      <img class="emptyGif" :src="emptyGif">
      <!-- <el-scrollbar class="default-scrollbar" wrap-class="default-scrollbar__wrap" view-class="p20-scrollbar__view">
      <el-row :gutter="20">
           <el-col :span="14"><el-table :data="histogramChartData.rows">
              <el-table-column type="index" width="60"></el-table-column>
              <el-table-column label='部门中心' prop="部门中心" width="100"></el-table-column>
              <el-table-column label='培训总课时' prop="培训总课时" width="100"></el-table-column>
              <el-table-column label='培训总次数' prop="培训总次数" width="100"></el-table-column>
              <el-table-column label='培训总人数' prop="培训总人数" width="100"></el-table-column>
              <el-table-column label='培训总人时数' prop="培训总人时数" width="100"></el-table-column>
      </el-table></el-col>
        <el-col :span="18" class="echarts-item">
          <div class="content-title">各中心培训基本情况</div>
          <ve-histogram :data="histogramChartData" ></ve-histogram>
        </el-col>
        <el-col :span="18" class="echarts-item">
          <div class="content-title">各中心培训人均课时</div>
          <ve-line :data="lineChartData" :settings="lineChartSettings" :mark-point="lineChartMarkPoint"></ve-line>
        </el-col>
        <el-col :span="12" class="echarts-item">
          <div class="content-title">分公司培训类别比例</div>
          <ve-pie :data="pieChartData" :settings="pieChartSettings"></ve-pie>
        </el-col>
      </el-row>
    </el-scrollbar> -->
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import PanThumb from "@/components/PanThumb";
import GithubCorner from "@/components/GithubCorner";
import Vue from "vue";
import VCharts from "v-charts";
import { getHistogramData } from "@/api/actual";
import { getLineData } from "@/api/actual";
import { getPieData } from "@/api/actual";

Vue.use(VCharts);

export default {
  name: "dashboard-editor",
  components: { PanThumb, GithubCorner },
  data() {
    return {
      emptyGif:
        "https://wpimg.wallstcn.com/0e03b7da-db9e-4819-ba10-9016ddfdaed3",
      histogramChartData: {
        columns: [], //   "部门中心","培训次数","总课时","总人时数"
        rows: []
      },

      //   histogramChartSettings: {
      //     metrics: [ "直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎", "百度", "谷歌", "必应", "其他" ],
      //     dimension: ["日期"],
      //     stack: {
      //       广告: ["邮件营销", "联盟广告", "视频广告"],
      //       搜索引擎: ["百度", "谷歌", "必应", "其他"]
      //     }
      //   },
      histogramChartMarkLine: {
        data: [[{ type: "min" }, { type: "max" }]]
      },
      lineChartData: {
        columns: [], //"月份","客运营销中心","调度中心","物资部","车辆中心","工务通号中心","供电机电中心"
        rows: []
      },
      lineChartSettings: {
        metrics: [], //"客运营销中心","调度中心","物资部","车辆中心","工务通号中心","供电机电中心"
        dimension: [] //"月份"
      },
      lineChartMarkPoint: {
        data: [{ name: "最大值", type: "max" }]
      },
      pieChartData: {
        columns: [],
        rows: []
      },
      pieChartSettings: {
        dimension: "培训类别",
        metrics: "培训数量"
      }
    };
  },
  computed: {
    ...mapGetters(["name", "avatar", "roles"])
  },

  created: function() {
    this.histogramData();
    this.lineData();
    this.pieData();
  },
  methods: {
    histogramData() {
      //   this.$store.dispatch("openLoading");
      getHistogramData().then(response => {
        if (response.status === 200 && response.data.code === 2000) {
          this.histogramChartData.columns = response.data.columns;
          for (var x of response.data.item) {
            this.histogramChartData.rows.push(x);
          }
        //   console.log(this.histogramChartData.rows);
        } else {
          console.log(response);
          this.$notify({
            title: "失败1",
            message: response.status + response.data.msg,
            type: "error",
            duration: 200000
          });
        }
        // this.$store.dispatch("closeLoading");
      });
    },
    lineData() {
      //   this.$store.dispatch("openLoading");
      getLineData().then(response => {
        if (response.status === 200 && response.data.code === 2000) {
          this.lineChartData.columns = response.data.columns;
          for (var i = 0; i < response.data.columns.length; i++) {
            if (i === 0) {
              this.lineChartSettings.dimension.push(response.data.columns[i]);
            } else {
              this.lineChartSettings.metrics.push(response.data.columns[i]);
            }
          }
          for (var x of response.data.item) {
            this.lineChartData.rows.push(x);
          }
        } else {
          console.log(response);
          this.$notify({
            title: "失败1",
            message: response.status + response.data.msg,
            type: "error",
            duration: 200000
          });
        }
        // this.$store.dispatch("closeLoading");
      });
    },
    pieData() {
      //   this.$store.dispatch("openLoading");
      getPieData().then(response => {
        if (response.status === 200 && response.data.code === 2000) {
          this.pieChartData.columns = response.data.columns;
          for (var x of response.data.item) {
            this.pieChartData.rows.push(x);
          }
        } else {
          console.log(response);
          this.$notify({
            title: "失败1",
            message: response.status + response.data.msg,
            type: "error",
            duration: 200000
          });
        }
        // this.$store.dispatch("closeLoading");
      });
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.emptyGif {
  display: block;
  width: 45%;
  margin: 0 auto;
}

.dashboard-editor-container {
  background-color: #e3e3e3;
  min-height: 100vh;
  margin-top: -50px;
  padding: 100px 60px 0px;
  .pan-info-roles {
    font-size: 12px;
    font-weight: 700;
    color: #333;
    display: block;
  }
  .info-container {
    position: relative;
    margin-left: 190px;
    height: 150px;
    line-height: 200px;
    .display_name {
      font-size: 48px;
      line-height: 48px;
      color: #212121;
      position: absolute;
      top: 25px;
    }
  }
}
</style>
